<template>
    <div id="exportPdf" ref="exportPdf">
        <el-container>
            <el-container>
                <el-header>桑尼星际大酒店电子发票</el-header>
                <el-main>
                    <el-alert
                            title="单位名称：桑尼星际大酒店     地址：银河系地球"
                            type="error">
                    </el-alert>
                    <el-table
                            :data="feePrint"
                            :show-header="true"
                            border
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="id"
                                label="序号"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.id"></el-input>
                                <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.id}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="coustomerId"
                                label="客户编号"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.coustomerId"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.coustomerId}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="coustomerName"
                                label="客户姓名"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.coustomerName"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.coustomerName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="houseId"
                                label="房间号"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.houseId"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.houseId}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="allMoney"
                                label="消费总金额"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.allMoney"></el-input>
                                <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.allMoney}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="startTime"
                                label="开始时间"
                                width="210">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.startTime"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.startTime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="endTime"
                                label="结束时间"
                                width="210">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.endTime"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.endTime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="description"
                                label="相关说明"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.description"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.description}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="feeType"
                                label="支付方式"
                                width="100">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入内容" v-show="scope.row.show"
                                          v-model="scope.row.feeType"></el-input>
                                <span v-show="!scope.row.show"
                                      style="margin-left: 10px">{{scope.row.feeType}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer>本发票由宇宙火星委员组织委员会联合颁发 填报人：@&**￥</el-footer>
                <div class="dayin">
                    <!--                    <el-button type="success" @click="printPdf" round>打印</el-button>-->
                    <!--                    <el-button type="danger" @click="savePdf" round >导出PDG</el-button>-->
                    <el-button type="danger" @click="printOut22" round>导出PDG</el-button>
                </div>
            </el-container>
        </el-container>
    </div>
</template>


<script>
    import html2Canvas from "html2canvas";
    import JsPDF from "jspdf";

    export default {
        name: "FeePrint.vue",

        created() {
            const feeId = this.$route.params.id;
            console.log(feeId)
            this.queryFee()
        },
        data() {
            return {
                feePrint: [],

                exportPdf: []
            }
        },
        methods: {
            queryFee() {
                const _this = this
                const feeId = this.$route.params.id;
                _this.$axios.get('/fee/feeSel/' + feeId).then(res => {
                    _this.feePrint.push(res.data.data)
                    console.log(_this.feePrint)
                })
            },
            savePdf() {
                this.$PDFSave(this.$refs.exportPdf, "我的文件");
            },
            printPdf() {
                this.$easyPrint('exportPdf', "我的文件", 'landscape');
            },


            printOut22() {
                var title = this.feePrint;
                var that = this;
                html2Canvas(document.querySelector("#exportPdf"), {
                    allowTaint: true
                }).then(function (canvas) {
                    console.log(canvas.height);
                    let contentWidth = canvas.width;
                    let contentHeight = canvas.height;
                    let pageHeight = contentWidth / 592.28 * 841.89;
                    let leftHeight = contentHeight;
                    let position = 0;
                    let imgWidth = 595.28;
                    let imgHeight = 592.28 / contentWidth * contentHeight;
                    let pageData = canvas.toDataURL("image/jpeg", 1.0);
                    let PDF = new JsPDF("", "pt", "a4");
                    if (leftHeight < pageHeight) {
                        PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 842;
                            if (leftHeight > 0) {
                                PDF.addPage();
                            }
                        }
                    }
                    PDF.save(title + ".pdf");
                    that.dianpingShow = true;
                });
            },
        }
    }
</script>

<style scoped>
    .hotel {
        margin: 0 auto;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 80px;
        margin: 0 auto;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .dayin {
        margin: auto;
    }
</style>